<template>
    <div class="qiamnDaoMian">

        <div class="qianTop">
            <div class="erCode">
                <img :src="form.signaturePic" alt="" srcset="">
                <span>扫码签到</span>
            </div>
            <img src="../assets/X2/liuYan/liuyanTit.png" alt="留言墙">
            <div>会议日期：<span>{{ form.signatureStartTime }}至{{ form.signatureEndTime }}</span></div>
        </div>
        <div class="canleBox">
            <div @click="stopHandle">
                {{ signFlag ? '开始签到' : '停止签到' }}
            </div>
            <div v-if="signFlag" @click="startHandle">{{ startFlag ? '暂停' : '开始' }}</div>
        </div>
        <!-- 人员列表 开始 -->
        <div class="staList">
            <el-carousel ref="carousel" arrow="never" :autoPlay="autoPlay" :interval="5000" height="79vh"
                :initial-index="activeIndex" indicator-position="none">
                <el-carousel-item v-for="(item, index) in pageList" :key="index">
                    <div class="userMian">
                        <div class="userBox" v-for="(ele, eindex) in item" :key="eindex">
                            <div>
                                <span> {{ ele.name.slice(0, 1) }}</span>
                            </div>
                            <span>{{ ele.name }}</span>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 人员列表 结束 -->

        <!-- 弹窗展示 开始 -->
        <div class="diaBox" v-if="showFlag">
            <div class="userBox1">
                <div class="boxTop">签到用户</div>
                <div class="userImg">
                    <div class="imgBox">{{ userInfo.name.slice(0, 1) }}</div>
                    <div>{{ userInfo.name }}</div>
                </div>
                <div class="userInfo1">
                    <div v-if="sexFlag && userInfo.sex != ''">
                        <span>性别</span>
                        <span>{{ userInfo.sex }}</span>
                    </div>
                    <div v-if="telFlag && userInfo.tel != ''">
                        <span>电话</span>
                        <span>{{ userInfo.tel }}</span>
                    </div>
                    <div v-if="companyFlag && userInfo.company != ''">
                        <span>公司</span>
                        <span>{{ userInfo.company }}</span>
                    </div>
                    <div v-if="positionFlag && userInfo.position != ''">
                        <span>职位</span>
                        <span>{{ userInfo.position }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹窗展示  结束 -->
    </div>
</template>


<script>
export default {
    name: 'qianDao',
    data() {
        return {
            userList: [],
            pageList:
                localStorage.signPageList == undefined
                    ? []
                    : JSON.parse(localStorage.signPageList),
            pageList: [],
            activeIndex: 0,
            autoPlay: true,
            form: {},
            activeId: localStorage.activeId == undefined ? 0 : localStorage.activeId,
            startFlag: false,
            timer: "",
            showFlag:
                localStorage.showFlag == undefined
                    ? false
                    : JSON.parse(localStorage.showFlag),
            userInfo: {},
            showTimer: "",
            num: localStorage.signNum == undefined || localStorage.signNum == NaN ? 0 : localStorage.signNum,
            total: 0,
            signFlag: localStorage.signFlag == undefined ? false : true,
            nameFlag: false,
            telFlag: false,
            sexFlag: false,
            companyFlag: false,
            positionFlag: false,
        }
    },
    created() {
        if (localStorage.form != undefined) {
            this.form = JSON.parse(localStorage.form)
            console.log(this.form);
            var str = this.form.signatureFlag
            console.log(str);

            this.nameFlag = str.indexOf('姓名') != -1
            this.telFlag = str.indexOf('电话') != -1
            this.sexFlag = str.indexOf('性别') != -1
            this.companyFlag = str.indexOf('公司') != -1
            this.positionFlag = str.indexOf('职位') != -1
        }
        if (localStorage.signUserList) {
            this.userList = JSON.parse(localStorage.signUserList);
        }
        this.pageList = this.cutArray(this.userList, 105);
        console.log(this.pageList);
        this.openWeb()
    },
    methods: {
        openWeb() {
            if (typeof WebSocket == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            } else {
                console.log("您的浏览器支持WebSocket");
                console.log(this.form);
                // var socketUrl = "http://192.168.0.111:2033/imserver/" + 's_' + this.form.signatureId;
                var socketUrl = "wss://www.ccclkj.cn:2033/imserver/" + 's_' + this.form.signatureId;
                socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
                console.log(socketUrl);
                if (this.socket != null) {
                    this.socket.close();
                    this.socket = null;
                }
                //打开事件
                this.socket = new WebSocket(socketUrl);
                //打开事件
                this.socket.onopen = function () {
                    console.log("websocket已打开");
                };
                var _this = this;
                //获得消息事件
                _this.socket.onmessage = function (msg) {
                    console.log(msg.data);
                    if (msg.data == "连接成功") {
                        _this.$message({
                            type: "success",
                            duration: 500,
                            offset: "400",
                            message: "连接成功",
                        });
                    }
                    if (msg.data != "连接成功") {
                        var data = JSON.parse(msg.data);
                        console.log(data);
                        data.userTel = _this.telHandle(data.userTel)
                        console.log(_this.userList);
                        if (!_this.signFlag) {
                            _this.userList.push({
                                name: data.name,
                                sex: data.userSex,
                                tel: data.userTel,
                                company: data.company,
                                demand: data.demand,
                                position: data.position,
                                nowTime: _this.currentTime()
                            });
                        }
                        localStorage.signUserList = JSON.stringify(_this.userList);
                        console.log(_this.userList);
                        //发现消息进入    开始处理前端触发逻辑
                    };
                    //关闭事件
                    _this.socket.onclose = function () {
                        console.log("websocket已关闭");
                    };
                    //发生了错误事件
                    _this.socket.onerror = function () {
                        _this.$message.warning("连接失败");
                        console.log("websocket发生了错误");
                    };
                }
            }
        },
        cutArray(array, subLength) {
            let index = 0;
            let newArr = [];
            while (index < array.length) {
                newArr.push(array.slice(index, (index += subLength)));
            }
            return newArr;
        },
        nextHandle() {
            this.activeIndex = this.pageList.length - 1;
        },
        currentTime() {
            var date = new Date();
            var year = date.getFullYear();
            var dateArr = [
                date.getMonth() + 1,
                date.getDate(),
            ];
            return year +
                "-" +
                dateArr[0] +
                "-" +
                dateArr[1]
        },
        telHandle(tel) {
            let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/
            return tel.replace(reg, "$1****$2")
        },
        // 播放 暂停 弹窗
        startHandle() {
            console.log(this.startFlag);
            if (this.startFlag) {
                // 暂停弹窗
                clearInterval(this.showTimer)
                this.showFlag = false
                console.log(this.num);
                localStorage.signNum = this.num
                this.startFlag = false
            } else {
                // 开始弹窗
                this.showFlag = true
                this.startFlag = true
                this.num = localStorage.signNum || 0
                this.loops()
            }
        },
        stopHandle() {

            if (!this.signFlag) {
                // 停止
                this.socket.close()
                this.signFlag = true
            } else {
                // 开启
                this.openWeb()
                this.signFlag = false
            }

            // if (this.userList.length != 0) {
            //     this.signFlag = true;
            //     localStorage.signFlag = true;
            //     this.userInfo = this.userList[0];
            //     this.loops();
            // }
        },
        loops() {
            console.log(this.userList);
            console.log(this.num);

            this.userInfo = this.userList[this.num];
            console.log(this.userInfo);
            // return

            this.autoPlay = true;
            this.showFlag = true;
            this.showTimer = setInterval(() => {
                if (this.num == this.userList.length - 1) {
                    this.num = 0;
                } else {
                    this.num++;
                }

                this.userInfo = this.userList[this.num];
                console.log(this.userInfo);
                console.log(this.num);
            }, 4000);
        },

    },
    watch: {
        userList(val) {
            this.pageList = this.cutArray(val, 105);
            localStorage.signPageList = JSON.stringify(this.pageList);
        },
        pageList(val, oldVal) {
            if (val.length > oldVal.length) {
                this.nextHandle();
            }
        },
    },
    beforeDestroy() {
        clearInterval(this.showTimer);
    },
}
</script>
<style lang="less" scoped>
.qiamnDaoMian {
    overflow: hidden;

    .qianTop {
        position: relative;
        padding-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        padding-bottom: 30px;
        background-color: #999999;
        background-image: url(../assets/wallBg.png);
        background-size: 100% 100%;

        img {
            margin-bottom: 20px;
            width: 100px;
            height: 60px;
        }

        >div:first-child {
            margin-bottom: 3px;
            font-size: 36px;
            font-family: FZZongYi-M05S;
            font-weight: 400;
            color: #0B1532;
            cursor: pointer;
        }

        >div:nth-child(2) {
            margin-bottom: 14px;
            font-size: 18px;
            font-family: FZZongYi-M05S;
            font-weight: 400;
            color: #0B1532;
            cursor: pointer;
        }

        >div:nth-child(3) {
            margin-bottom: 30px;
            font-size: 32px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
        }

        >div:last-child {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            cursor: pointer;

            span {
                color: #3E68FF;
            }
        }
    }

    ::-webkit-scrollbar {
        display: none;
    }

    .staList {

        box-sizing: border-box;
        padding: 30px 0px;
        margin: -2px 40px 0px;
        display: flex;
        justify-content: flex-start;
        align-content: start;
        flex-wrap: wrap;
        width: calc(100% - 80px);
        height: 70vh;
        background: #FAFEFF;
        border: 2px solid #EBF0FF;
        border-radius: 0px 0px 20px 20px;




        >div {
            position: relative;
            // margin-right: 62px;
            // margin-bottom: 24px;
            width: 100%;
            // display: flex;
            // flex-direction: column;
            // align-items: center;
            // justify-content: center;
            cursor: pointer;

            // .bgImg {
            //     margin-bottom: 8px;
            //     position: relative;
            //     display: flex;
            //     justify-content: center;
            //     align-items: center;
            //     width: 110px;
            //     height: 100px;
            //     background: url(../assets/X2/jiang/bg.png);
            //     background-size: 100%;
            //     background-repeat: no-repeat;

            //     img {
            //         position: absolute;
            //         top: 20px;
            //         left: 20px;
            //         width: 70px;
            //         height: 70px;
            //         border-radius: 50%;
            //     }
            // }

            // .bg {
            //     margin-bottom: 8px;
            //     position: relative;
            //     display: flex;
            //     justify-content: center;
            //     align-items: center;
            //     width: 110px;
            //     height: 100px;

            //     img {
            //         position: absolute;
            //         top: 20px;
            //         left: 20px;
            //         width: 70px;
            //         height: 70px;
            //         border-radius: 50%;
            //     }
            // }

            // .jiangTip {
            //     position: absolute;
            //     top: 15px;
            //     left: 10px;
            // }



            // div {
            //     font-size: 16px;
            //     font-family: Source Han Sans CN;
            //     font-weight: 500;
            //     color: #0B1532;
            //     width: 70px;
            //     text-align: center;
            //     white-space: nowrap;
            //     overflow: hidden;
            //     text-overflow: ellipsis;
            // }

            // .jiangName {
            //     color: #3E68FF;
            // }
        }
    }

    .jiangBtn {
        margin: 70px auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 192px;
        height: 64px;
        background: #0B1532;
        border-radius: 32px;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        cursor: pointer;

        img {
            margin-left: 16px;
            width: 14px;
            height: 12px;
        }
    }

    .jiangDialog {
        padding-bottom: 24px;
        position: absolute;
        top: 0px;
        left: -97px;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        width: 540px;
        background: #fff;
        border-radius: 18px 18px 16px 16px;

        .jiangTop {
            box-sizing: border-box;
            padding: 0px 28px 0 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 540px;
            height: 69px;
            background: #0B1532;
            border-radius: 16px 16px 0px 0px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            cursor: pointer;
        }

        img {
            margin-top: 27px;
            width: 102px;
            height: 102px;
            border-radius: 50%;
        }

        >span {
            margin-top: 18px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
            cursor: pointer;
        }

        .btnBox {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            width: 100%;

            >div {
                width: 145px;
                height: 47px;
                line-height: 47px;
                text-align: center;
                background: #0B1532;
                border-radius: 24px;
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                cursor: pointer;

            }

            >div:first-child {
                margin-right: 114px;
                color: #FFFFFF;
            }

            >div:last-child {
                border: 2px solid #0B1532;
                background-color: #fff;
                color: #0B1532;
            }
        }

        .userListBox {
            width: 100%;
            max-height: 300px;
            overflow-y: scroll;

            .listItem {
                padding: 10px 32px;
                font-size: 20px;
                color: #fff;

                span:last-child {
                    margin-left: 20px;
                }
            }
        }
    }
}


.userMian {
    box-sizing: border-box;
    padding: 5px 10px 0px;
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    width: 100%;
}

.userBox {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% / 15);
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #0B1532;
}

.userBox>div {
    margin-bottom: 0px;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    border-radius: 50%;
    // background-color: #FED98B;
    background: linear-gradient(25deg, #CC904A 0%, #FED98B 100%);

}

.userBox>div>span {
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    color: #f2f2f2;
}

.userBox>span {
    text-align: center;
    display: block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-carousel__container,
.el-carousel {
    width: 100% !important;
    height: 70vh !important;
    // background-color: #FED98B;
    overflow: hidden;
}



.el-carousel::-webkit-scrollbar {
    display: none;
}

.el-carousel__arrow {
    display: none !important;
}

.el-carousel__indicators--horizontal {
    z-index: -1 !important;
    display: none !important;
}

.jiangBox {
    width: 100%;
    height: 600px;
}

.selectuser {
    position: relative;
    box-sizing: border-box;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 373px;
    height: 46px;
    border: 2px solid #cc904a;
    border-radius: 8px;
    border-top: 1px solid #cc904a;
    border-bottom: 1px solid #cc904a;
}

.selectuser>div:nth-child(2) {
    font-size: 48px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #fed98b;
    transform: scaleY(0.5);
}

.selectuser>div:not(:nth-child(2)) {
    width: 22px;
    height: 10px;
    background: linear-gradient(65deg, #bf8145, #eec388, #8c4d22);
}

.selectuser>div:first-child {
    width: 0px;
    height: 0px;
    border: 20px solid transparent;
    border-left-color: #eec388;
    transform: scaleY(0.5);
}

.selectuser>div:last-child {
    width: 0px;
    height: 0px;
    border: 20px solid transparent;
    border-right-color: #eec388;
    transform: scaleY(0.5);
}

.diaBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .3);
    z-index: 10;
}

.userBox1 {
    padding-bottom: 50px;
    width: 540px;
    background: #FFFFFF;
    border-radius: 18px 18px 16px 16px;
}

.boxTop {
    width: 540px;
    height: 69px;
    background: #7273E5;
    border-radius: 16px 16px 0px 0px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 69px;
    text-align: center;
}

.userImg {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    border-bottom: 14px solid #fafafa;
}

.imgBox {
    margin-bottom: 14px;
    width: 102px;
    height: 102px;
    line-height: 102px;
    text-align: center;
    border-radius: 50%;
    background-color: #F9CD92;
    color: #fff;
    font-size: 42px;
    font-weight: bold;
}

.userInfo1 {
    width: 100%;
}

.userInfo1>div {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 24px 56px;
    width: 100%;
    border-bottom: 2px solid #f2f2f2;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
}

.userInfo1>div:last-child {
    border-bottom: 0px;
}

.userInfo1>div>span:last-child {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
}

.userBox1 {
    animation: scaleAnmite 4s linear infinite;
    -webkit-animation: scaleAnmite 4s linear infinite;
}

@keyframes scaleAnmite {
    0% {
        transform: scale(0);
    }

    0.5% {
        transform: scale(0.1);
    }

    1% {
        transform: scale(0.2);
    }

    1.5% {
        transform: scale(0.3);
    }

    2% {
        transform: scale(0.4);
    }

    2.5% {
        transform: scale(0.5);
    }

    3% {
        transform: scale(0.6);
    }

    3.5% {
        transform: scale(0.7);
    }

    4% {
        transform: scale(0.8);
    }

    4.5% {
        transform: scale(0.9);
    }

    5% {
        transform: scale(1);
    }

    95% {
        transform: scale(1);
    }

    95.5% {
        transform: scale(0.9);
    }

    96% {
        transform: scale(0.8);
    }

    96.5% {
        transform: scale(0.7);
    }

    97% {
        transform: scale(0.6);
    }

    97.5% {
        transform: scale(0.5);
    }

    98% {
        transform: scale(0.4);
    }

    98.5% {
        transform: scale(0.3);
    }

    99% {
        transform: scale(0.2);
    }

    99.5% {
        transform: scale(0.1);
    }

    100% {
        transform: scale(0);
    }

    100% {
        transform: scale(0);
    }
}

.canleBox {
    position: absolute;
    top: 100px;
    left: 28px;
    z-index: 12;
    cursor: pointer;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    // text-decoration: underline;
    color: #0B1532;
    // border-bottom: 1px solid #0B1532;
}


.erCode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 80px;
    top: 30px;
    // width: 140px;
    // height: 140px;
    font-size: 20px !important;
    color: #0B1532 !important;
    font-weight: bold !important;
}

.erCode>img {
    margin-bottom: 6px !important;
    width: 118px !important;
    height: 118px !important;
    // background: #EBF0FF;
    border-radius: 10px !important;
}
</style>